<template lang='pug'>
  .page
    .search-form
      Row(type="flex" justify="start" :gutter="16")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 邮件主题：
          Input(v-model="searchForm.Theme" placeholder="请输入主题关键字" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 发件人：
          Input(v-model="searchForm.FromName" placeholder="请输入发件人" clearable)
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w80 创建时间：
          DatePicker(type="daterange" placeholder="请选择" style="width: 100%" @on-change="dateChange")
        Col.pr-20.mb-15(:md="{ span: 12 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 6}")
          span.label-txt.w120 邮件状态：
          RadioGroup.beautiful-radio-group.ml-10(type="button" v-model="searchForm.Status" @on-change="statusChange")
            Radio(label="") 全部
            Radio(:label="1") 已读
            Radio(:label="0") 未读
          Button.ml-15(v-if="hasFind" type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :loading="loading" @on-selection-change="onSelectChange" :stripe="true")
        ._table_header(slot="header")
          .table-title-lefttxt.pull-left
            span.leftText
              | 合计:
              span.text-info.pl-5.pr-5.font-weight {{totalRows}}
            Divider(type="vertical")
            span.leftText
              | 已读:
              span.text-info.pl-5.pr-5.font-weight {{readCount}}
              | 条
            Divider(type="vertical")
            span.leftText
              | 未读:
              span.text-red.pl-5.pr-5.font-weight {{unreadCount}}
              | 条
          .pull-right.table-title-btns
            i-button.mr-10(v-if="hasUpdate" type="info" @click="handleMail") 全部置为已读
            i-button.mr-10(v-if="hasDel" type="info" @click="DeleteMail(type)") 回收
        template(slot-scope="{ row, index }" slot="theme")
          div.theme
            i.iconfont(:class="row.status?'icon-yidu':'icon-youjian1'")
            span.u-d-info(@click="gotoDetail(type, row.id)") {{row.theme}}
        ._table_footer(slot="footer")
          //- span 共{{totalRows}}条
          template
            Page(class="_page" :total="totalRows" :current="searchForm.PageIndex" prev-text="上一页" next-text="下一页" @on-change="onChangePage" @on-page-size-change="onpageSizeChange" show-sizer show-total :page-size-opts="[10, 20, 30, 50, 100]")
    Detail(ref="detail_info" :loading="loading" :detailData="detailData" :replyShow="replyShow" @get-list="getList(type)")
</template>

<script>
import Mixin from '../mixin.js'
import mailApi from '../service.js'

export default {
  name:'mail-inbox',
  props:{},
  mixins: [Mixin],
  data () {
    return {
      type: 1,
      thead: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '邮件主题',
          minWidth: 300,
          key: 'theme',
          slot: 'theme'
        },
        {
          title: '发件人',
          width: 200,
          align: 'center',
          key: 'name',
          tooltip: true
        },
        {
          title: '创建时间',
          width: 190,
          align: 'center',
          key: 'createdOn',
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.createdOn) {
              times = row.createdOn.slice(0, 19).replace(/T/, ' ')
            }
            return h('span', times)
          }
        }
      ],
    }
  },

  components: {
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 回收
    hasDel () {
      return this.actionArr.indexOf('Delete') > -1
    },
    hasUpdate () {
      return this.actionArr.indexOf('Update') > -1
    },
  },

  beforeMount() {},

  mounted() {
    // this.getFirstParentCompanys(1)
    this.getList(this.type)
    // console.log(this.$store.state)
  },

  methods: {
    searchBtn () {
      this.searchForm.PageIndex = 1
      this.getList(this.type)
    },
    handleMail () {
      mailApi.Update({
        id: this.Ids
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.getList(this.type)
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    statusChange (val) {
      console.log(val)
    },
    onChangePage (val) {
      this.searchForm.PageIndex = val
      this.getList(this.type)
    },
    /**
     * 分页页码变动
     */
    onpageSizeChange (val) {
      this.searchForm.PageIndex = 1
      this.searchForm.PageSize = val
      this.getList(this.type)
    },
  },

  watch: {
    $route (to, from) {
      if (this.$store.state.mail.inboxChange) {
        this.getList(this.type)
        this.handleInbox(false)
      } else {
        return false
      }
    }
  }

}

</script>
<style lang='less' scoped>
  .theme{
    position: relative;
    padding-left: 24px;
    .iconfont{
      position: absolute;
      top: 0;
      left: 0;
      color: #FFB319;
      font-size: 14px;
    }
    .icon-yidu{
      color: #cecccc;
    }
  }
  .text-red{
    color: #ed4014;
  }
</style>